<template>
	<view class="layout" @click="allClick">
		<view class="layout-header">
			<DistributionNavBar fixed :rgb="headerNavBarStyle">
				<template slot="title">
					<text :style="[headerTextStyle]">我的</text>
				</template>

				<!-- #ifndef MP-WEIXIN -->
				<template slot="right" v-if="isShowSetupIcon">
					<view class="layout-header-setting">
						<image src="@/static/images/my/icon_i_setting.png" @click="goToUserSet" />
					</view>
				</template>
				<!-- #endif -->
			</DistributionNavBar>
		</view>

		<view class="layout-top">
			<view class="user-info">
				<view class="user-info-warp">
					<image :src="userInfo.headUrl" class="head-portrait" @click.stop="jumpProfilePicture" />

					<view class="user-info-warp-content">
						<view class="nickname" @click.stop="handleLogin">{{ userInfo.nickName }}</view>

						<template v-if="loginStatus">
							<view class="user-info-warp-medal">
								<image
									class="user-info-warp-medal-image"
									:src="medalTypeList[medalItem]"
									v-for="(medalItem, medalIndex) in medalList"
									:key="medalIndex"
								/>
							</view>
							<view v-if="userInfo.phone" class="user-info-warp-phone">
								{{ userInfo.phone.substring(0, 3) + '****' + userInfo.phone.substring(7, 11) }}
							</view>
						</template>
					</view>

					<!-- #ifdef MP-WEIXIN -->
					<view class="user-info-warp-right" v-if="isShowSetupIcon">
						<image src="@/static/images/my/icon_more.png" @click.stop="goToUserSet" />
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<view class="layout-body">
			<!-- 账户管理 -->
			<view class="layout-body-income" :style="{ backgroundImage: `url(${incomeBgIMage})` }">
				<view class="layout-body-income-total">
					<view class="layout-body-income-total-info">
						<view class="layout-body-income-total-info-text">
							<text class="layout-body-income-total-info-text-text">总收益</text>
							<image
								:src="isIncomeStatus ? '/static/images/my/icon_i_show.png' : '/static/images/my/icon_i_hide.png'"
								class="layout-body-income-total-info-text-icon"
								@click.stop="changeIncomeStatus"
							/>
						</view>
						<view class="layout-body-income-total-info-money">
							{{ isIncomeStatus ? moneyInfo.totalProfitYuan || '0.00' : '***' }}
						</view>
					</view>
					<view class="layout-body-income-total-bottom" @click="handleAccount">我的收益</view>
				</view>

				<view class="layout-body-income-money">
					<view class="layout-body-income-money-list" v-for="(moneyItem, index) in cashEarningList" :key="index">
						<view class="layout-body-income-money-list-text">
							<view class="layout-body-income-money-list-text-name">{{ moneyItem.name }}</view>
							<image
								class="layout-body-income-money-list-text-icon"
								src="@/static/images/my/icon_i_question.png"
								@click.stop="openPrompt(index)"
							/>
						</view>
						<view class="layout-body-income-money-list-detail">
							{{ isIncomeStatus ? moneyInfo[moneyItem.type] || '0.00' : '***' }}
						</view>
						<view v-show="moneyItem.status" class="layout-body-income-money-list-prompt">
							<image class="layout-body-income-money-list-prompt-icon" src="@/static/images/my/img_i_ts.png" />
							<view class="layout-body-income-money-list-prompt-text" :style="{ marginLeft: moneyItem.textLeft }">
								<view v-for="(promptItem, promptIndex) in moneyItem.hint" :key="promptIndex">
									{{ promptItem }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单管理 -->
			<view class="layout-body-order">
				<view class="layout-body-order-title">
					<view class="layout-body-order-title-name">
						<view
							class="layout-body-order-title-name-item"
							v-for="(item, index) in orderTypeList"
							:key="index"
							@click="changeOrderType(item.type, index)"
						>
							<view
								:class="
									item.select ? 'layout-body-order-title-name-item-text' : 'layout-body-order-title-name-item-text-no'
								"
							>
								{{ item.name }}
							</view>
							<image
								v-show="item.select && orderTypeList.length > 1"
								class="layout-body-order-title-name-item-image"
								src="@/static/images/my/icon_i_tab_active.png"
							/>
						</view>
					</view>
					<view class="layout-body-order-title-link" @click="goToOrderList(-1)">
						<view class="layout-body-order-title-link-text">全部</view>
						<image class="layout-body-order-title-link-icon" src="@/static/images/my/icon_more.png" />
					</view>
				</view>
				<view class="layout-body-order-context">
					<view
						class="layout-body-order-context-box"
						v-for="(item, index) in orderList"
						:key="index"
						@click="goToOrderList(item.type, index)"
					>
						<view class="layout-body-order-context-item">
							<view
								v-if="item.numName && numObject[currentOrderType][item.numName] > 0"
								class="layout-body-order-context-item-num"
							>
								{{ numObject[currentOrderType][item.numName] > 99 ? '99+' : numObject[currentOrderType][item.numName] }}
							</view>
							<image class="layout-body-order-context-item-icon" :src="item.icon" />
							<view class="layout-body-order-context-item-name">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="layout-body__list flex row-start">
				<view class="layout-body__list-title">更多功能</view>
				<button
					hover-class="none"
					class="list-item"
					:key="index"
					@click="handleClickFeatures(item)"
					v-for="(item, index) in featuresTypeList"
				>
					<view class="list-item-left">
						<image :src="item.iconUrl" class="icon" />
						<view class="text">{{ item.label }}</view>
					</view>
				</button>
				<button hover-class="none" class="list-item" v-if="isBlnOpen" @click="handleClickAgent()">
					<view class="list-item-left">
						<image src="@/static/images/my/icon_i_expand@2x.png" class="icon" />
						<view class="text">拓展达人</view>
					</view>
				</button>
			</view>
		</view>

		<!-- 客户咨询 -->
		<DistributionService v-model="isPopup" />

		<DistributionTabBar :tabIndex="4" />

		<!-- 邀请码-->
		<DistributionInviteCode :showAdd="showAddCode" @closeInviteCode="closeInviteCode" />

		<!-- 邀请码使用成功框框-->
		<DistributionInvitation v-model="useSuccessCode" />
		<!-- 抖音授权弹层 -->
		<dyPopupCode />
	</view>
</template>

<script>
import { debounce } from 'lodash';
import { mapGetters, mapMutations } from 'vuex';

import { myAccount, getOrderNumberInfo } from '@/api/my';
import { registerCheckOpen } from '@/api/other';

import { defaultImageUrl, isCheckLogin } from '@/utils';
import srorageKey from '@/utils/srorage/key';
import { setLocal } from '@/utils/srorage';
import DistributionTabBar from '@/components/distributionTabBar';
import DistributionService from '@/components/distributionService';
import DistributionInviteCode from '@/components/distributionInviteCode';
import DistributionInvitation from '@/components/distributionInvitation';
import DistributionNavBar from '@/components/distributionNavBar/indeHome';
import dyPopupCode from '@/components/dyPopup/dyPopupCode.vue';
import { checkDyAuth } from '@/api/third';
import { judgeOneTime, setOneTime } from '@/utils/common';
const medalTypeList = Object.freeze({
	create: '/static/images/my/img_i_tag_create.png',
	popular: '/static/images/my/img_i_tag_popular.png',
	shop: '/static/images/my/img_i_tag_shop.png'
});

const cashEarningList = [
	//收益列表
	{
		name: '可提现',
		type: 'cashProfitYuan',
		hint: ['探店完成上传视频且审核通过后，拍摄费收益可提现', '素材审核通过后，被他人成功下载后收益可提现'],
		textLeft: '0rpx'
	},
	{
		name: '拍摄费收益',
		type: 'beSettleProfitYuan',
		hint: ['拍摄费的收益（可提现+待结算）'],
		textLeft: '-50rpx'
	},
	{
		name: '分销收益',
		type: 'seekProfitYuan',
		// 第三方平台CPS佣金总和（包含已核销、未核销、已退款、已预约）/（包含抖音+快手等后续的第三方平台）
		hint: ['第三方平台CPS佣金总和（包含已核销、未核销、已退款、已预约）/（包含抖音+快手等后续的第三方平台）'],
		textLeft: '-300rpx'
	}
	// {
	// 	name: '素材收益',
	// 	type: 'resourceCashProfitYuan',
	// 	hint: ['素材被他人下载成功所获得的收益'],
	// 	textLeft: '-310rpx'
	// }
];

const featuresTypeList = Object.freeze([
	{
		label: '抖音账号管理',
		// jumpUrl: '/thirdManage/dyAccount',
		iconUrl: require('@/static/images/my/icon_i_tiktok.png'),
		isShow: true,
		callBack: function () {
			if (!isCheckLogin()) {
				return;
			}
			uni.navigateTo({
				url: '/thirdManage/dyAccount'
			});
		}
	},
	{
		label: '联系客服',
		iconUrl: require('@/static/images/my/icon_i_service.png'),
		isShow: true,
		callBack: function () {
			this.isPopup = true;
		}
	},
	{
		label: '提现记录',
		jumpUrl: '/otherPage/WithdrawalsRecord',
		isShow: true,
		iconUrl: require('@/static/images/my/icon_i_withdraw.png')
	},
	{
		label: '银行卡管理',
		jumpUrl: '/otherPage/BankCard',
		isShow: true,
		iconUrl: require('@/static/images/my/icon_i_bankcard.png')
	}
	// {
	// 	label: '兑换码',
	// 	iconUrl: require('@/static/images/my/icon_i_invite.png'),
	// 	isShow: true,
	// 	callBack: function () {
	// 		if (!isCheckLogin()) {
	// 			return;
	// 		}

	// 		this.showAddCode = true;
	// 	}
	// }
]);

const seepDistance = 80;
const incomeBgIMage = 'https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_746cb03b417c4441a3d3663d65d3a6da.png'
// Object.freeze(`${defaultImageUrl}my/account_bg.png`);

export default {
	data() {
		this.debounced = debounce(({ scrollTop }) => {
			this.scrollTop = scrollTop;
		}, 20);

		return {
			incomeBgIMage,
			currentPromptContext: '',
			useSuccessCode: {},
			medalList: ['create', 'shop'],
			medalTypeList,
			featuresTypeList,

			scrollTop: 0,

			count: {
				allSeek: 0,
				failApprove: 0,
				finishTd: 0,
				waitApprove: 0,
				waitTd: 0,
				waitFinish: 0
			},

			account: {
				monthProfitYuan: 0,
				todayProfitYuan: 0,
				totalProfitYuan: 0
			},

			isPopup: false,

			showAddCode: false, //邀请码弹窗
			loginStatus: false, //登陆状态
			cashEarningList,
			moneyInfo: {},
			orderTypeList: [{ name: '订单管理', select: false, type: 0 }],
			currentOrderType: 0,
			numObject: [{}, {}],

			orderList: [
				{ icon: '/static/images/my/icon_dsp.png', name: '审核中', type: 1 },
				{ icon: '/static/images/my/icon_dwc.png', name: '待确认', type: 2 },
				{ icon: '/static/images/my/icon_dtd.png', name: '待探店', type: 3 },
				{ icon: '/static/images/my/icon_ywc.png', name: '已完成', type: 4 }
			],

			// waitApprove, waitFinish, waitTd
			tdOrderList: [
				{ numName: 'waitApprove', icon: '/static/images/my/icon_dsp.png', name: '审核中', type: 1 },
				{ numName: 'waitFinish', icon: '/static/images/my/icon_dwc.png', name: '待确认', type: 2 },
				{ numName: 'waitTd', icon: '/static/images/my/icon_dtd.png', name: '待探店', type: 3 },
				{ icon: '/static/images/my/icon_ywc.png', name: '已完成', type: 4 }
			],

			scOrderList: [
				{ numName: 'waitApprove', icon: '/static/images/my/icon_dsp.png', name: '审核中', type: 1 },
				{ icon: '/static/images/my/icon_ywc.png', name: '已完成', type: 2 }
			],
			isBlnOpen: false,
			codeUrl: '',
			selfAuserId: ''
		};
	},

	computed: {
		...mapGetters(['isIncomeStatus', 'userInfo', 'getToken']),

		userInfo() {
			const infoParams = this.$store.state.system.userInfo;

			return {
				nickName: '点击登录',
				headUrl: require('@/static/logo.png'),

				...infoParams
			};
		},

		isShowSetupIcon() {
			const {
				userInfo: { userId }
			} = this;

			return !!userId;
		},

		seepDistanceOpacity() {
			const { scrollTop } = this;

			return scrollTop / seepDistance;
		},

		headerTextStyle() {
			const { seepDistanceOpacity } = this;

			const color = `rgba(51, 51, 51, ${seepDistanceOpacity})`;

			return {
				color
			};
		},

		headerNavBarStyle() {
			const { seepDistanceOpacity } = this;

			return `rgba(255, 255, 255, ${seepDistanceOpacity})`;
		}
	},

	created() {
		uni.hideTabBar();
	},

	onShow() {
		const { isShowSetupIcon } = this;
		if (!isShowSetupIcon) {
			return;
		}

		this.loginStatus = true;

		//获取勋章
		this.getOrderNumberInfo();
		//获取收益
		this.getMyIncome();
		this.getCheckOpen();
		if (this.getToken) {
			this.checkNewUser().then((res) => {
				const { changeShowNotBindCode } = this;
				if (res === 0) {
					if (!judgeOneTime()) {
						return;
					}
					setOneTime(true);
					changeShowNotBindCode(true);
				}
			});
		}
	},

	methods: {
		...mapMutations(['changeIncomeStatus','changeShowNotBindCode']),

		allClick() {
			this.cashEarningList.forEach((item) => {
				this.$set(item, 'status', false);
			});
		},

		//打开问号提示
		openPrompt(index) {
			if (this.cashEarningList[index].status) {
				this.$set(this.cashEarningList[index], 'status', false);
			} else {
				this.cashEarningList.forEach((item, currentIndex) => {
					if (currentIndex === index) {
						this.$set(item, 'status', true);
					} else {
						this.$set(item, 'status', false);
					}
				});
			}
		},

		//获取我的收益
		getMyIncome() {
			myAccount().then((res) => {
				this.moneyInfo = res.data;
			});
		},

		//获取订单信息
		getOrderNumberInfo() {
			//勋章
			const medalInfo = [];
			//订单
			const orderTypeInfo = [];

			getOrderNumberInfo().then((res) => {
				const {
					code,
					data: { td, resource, userTag }
				} = res;
				if (code !== 200) {
					return;
				}
				this.numObject[0] = td;
				this.numObject[1] = resource;
				const agentShopMedal = userTag.indexOf('探店达人') !== -1;
				const materialMetal = userTag.indexOf('素材达人') !== -1;
				if (agentShopMedal) {
					medalInfo.push('shop');
					this.orderList = this.tdOrderList;
					this.currentOrderType = 0;
					if (materialMetal) {
						orderTypeInfo.push({ name: '探店', select: true, type: 0 });
					} else {
						orderTypeInfo.push({ name: '订单管理', select: true, type: 0 });
					}
				}
				if (materialMetal) {
					medalInfo.push('create');
					if (!agentShopMedal) {
						this.orderList = this.scOrderList;
						this.currentOrderType = 1;
						orderTypeInfo.push({ name: '订单管理', select: true, type: 1 });
					}
				}
				if (!medalInfo.length) {
					this.currentOrderType = 0;
					medalInfo.push('popular');
					orderTypeInfo.push({ name: '订单管理', select: true, type: 0 });
					this.orderList = this.tdOrderList;
				}
				this.medalList = medalInfo;
				this.orderTypeList = orderTypeInfo;
			});
		},

		//切换订单数据
		changeOrderType(type, index) {
			const { orderTypeList, tdOrderList, scOrderList } = this;
			if (type < 0) {
				return;
			}
			if (orderTypeList[index].select) {
				return;
			}
			for (const orderTypeListElement of orderTypeList) {
				if (orderTypeListElement.select) {
					orderTypeListElement.select = false;
				}
			}
			orderTypeList[index].select = true;
			if (type === 0) {
				this.orderList = tdOrderList;
			} else if (type === 1) {
				this.orderList = scOrderList;
			}
			this.currentOrderType = type;
		},

		jumpProfilePicture() {
			if (!this.loginStatus) {
				return;
			}

			uni.navigateTo({
				url: '/setupPage/UserInfo'
			});
		},

		//关闭邀请码弹窗
		closeInviteCode(useSuccess, params) {
			this.showAddCode = false;

			useSuccess && (this.useSuccessCode = params);
		},

		//跳转订单列表
		goToOrderList(index) {
			if (!isCheckLogin()) {
				return;
			}

			setLocal(srorageKey.tdIndex, index);
			uni.switchTab({
				url: `/pages/tabBar/order`
			});
		},

		handleLogin() {
			isCheckLogin();
		},

		goToUserSet() {
			if (!isCheckLogin()) {
				return;
			}

			uni.navigateTo({
				url: '/setupPage/UserSet'
			});
		},

		handleAccount() {
			if (!isCheckLogin()) {
				return;
			}

			uni.navigateTo({
				url: '/otherPage/AccountIncome'
			});
		},

		handleClickFeatures(params) {
			const { jumpUrl, callBack } = params;

			if (jumpUrl && isCheckLogin()) {
				uni.navigateTo({
					url: jumpUrl
				});

				return;
			}

			callBack && callBack.call(this);
		},
		handleClickAgent() {
			if (isCheckLogin()) {
				uni.navigateTo({
					url: `/otherPage/developTalent?codeImage=${encodeURIComponent(this.codeUrl)}&aUserId=${this.selfAuserId}`
				});
			} else {
				return;
			}
		},
		// 检查是否可以拓展达人
		getCheckOpen() {
			const { phone = '' } = this.userInfo || {};
			registerCheckOpen({ mobile: phone }).then((res) => {
				const { blnOpen = false, codeUrl = '', auserId = '' } = res.data || {};
				this.isBlnOpen = blnOpen;
				this.codeUrl = codeUrl;
				this.selfAuserId = auserId;
				this.$set(this, 'isBlnOpen', blnOpen);
			});
		},
		checkNewUser() {
			return new Promise((resolve, reject) => {
				checkDyAuth().then((res = {}) => {
					const { data = { checkStatus: 1 } } = res;
					resolve(data.checkStatus);
				});
			});
		}
	},

	onPageScroll(e) {
		this.debounced(e);
		this.allClick();
	},

	components: {
		DistributionService,
		DistributionTabBar,
		DistributionInvitation,
		DistributionInviteCode,
		DistributionNavBar,
		dyPopupCode
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	min-height: 100vh;
	@include Db_iosBottomDistance(120rpx);

	&-header {
		// #ifndef MP-WEIXIN
		&-setting {
			position: relative;
			padding-right: 20rpx;

			display: flex;
			justify-content: flex-end;

			image {
				height: 48rpx;
				width: 48rpx;
			}
		}
		// #endif
	}

	&::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 400rpx;
		background-image: linear-gradient(#DFE5FB, #ECF1FA);
	}

	&-top {
		z-index: 99;
		position: relative;

		.user-info {
			padding: 0 0 40rpx 20rpx;

			&-warp {
				display: flex;
				align-content: center;

				.head-portrait {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #ffffff;
				}

				.nickname {
					display: inline-flex;
					align-items: center;
					color: #333333;
					font-weight: bold;
					margin-left: 20rpx;
				}

				&-medal {
					height: 36rpx;
					margin: 8rpx 0rpx 8rpx 20rpx;
					display: flex;
					&-image {
						width: 112rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
				}

				&-phone {
					margin-left: 20rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 0.6);
					line-height: 24rpx;
				}

				&-content {
					flex: 1;
					display: flex;
					justify-content: center;
					flex-direction: column;
				}

				// #ifdef MP-WEIXIN
				&-right {
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						padding: 20rpx;
						margin-right: 24rpx;
					}
				}
				// #endif
			}
		}
	}

	&-body {
		padding: 0 20rpx;
		position: relative;
		// top: -44rpx;
		z-index: 10;

		&-income {
			width: 710rpx;
			height: 284rpx;
			background-size: 100% 100%;
			padding-top: 32rpx;
			margin-bottom: 20rpx;

			&-total {
				display: flex;
				align-items: center;
				height: 96rpx;
				position: relative;

				&-info {
					margin-left: 24rpx;
					height: 96rpx;
					&-text {
						display: flex;
						align-items: center;
						height: 40rpx;
						&-text {
							font-size: 24rpx;
							font-weight: 400;
							color: #ffffff;
						}
						&-icon {
							width: 40rpx;
							height: 40rpx;
							margin-left: 12rpx;
						}
					}

					&-money {
						margin-top: 8rpx;
						font-size: 56rpx;
						font-weight: bold;
						color: #ffffff;
						font-family: font-number;
						letter-spacing: -3rpx;
					}
				}

				&-bottom {
					position: absolute;
					right: 24rpx;
					width: 152rpx;
					height: 56rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 28rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #ffffff;
					line-height: 56rpx;
					text-align: center;
				}
			}

			&-money {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 72rpx;
				margin-top: 48rpx;
				padding: 40rpx 24rpx;

				&-list {
					position: relative;
					&-text {
						display: flex;
						align-items: center;
						&-name {
							font-size: 24rpx;
							font-weight: 400;
							color: #ffffff;
						}
						&-icon {
							margin-left: 4rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
					&-detail {
						margin-top: 4rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #ffffff;
						font-family: font-number;
					}
					&-prompt {
						position: absolute;
						z-index: 999;
						top: 48rpx;
						left: -10rpx;
						&-icon {
							width: 20rpx;
							height: 10rpx;
							margin-left: 30rpx;
						}
						&-text {
							padding: 16rpx;
							width: 480rpx;
							background: #333333;
							border-radius: 12rpx;
							opacity: 0.9;
							font-size: 24rpx;
							font-weight: 400;
							color: #ffffff;
						}
					}
				}
			}
		}
		&-order {
			width: 710rpx;
			height: 270rpx;
			padding: 32rpx 24rpx;
			background: #ffffff;
			box-shadow: 0 4rpx 24rpx 0 rgba(255, 246, 232, 0.13);
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			&-title {
				display: flex;
				justify-content: space-between;
				&-name {
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;

					&-item {
						margin-right: 50rpx;
						height: 58rpx;
						position: relative;
						&-text {
							font-size: 32rpx;
							font-weight: 600;
							color: #333;
							line-height: 44rpx;
						}
						&-text-no {
							font-size: 28rpx;
							font-weight: 500;
							color: #666;
							line-height: 44rpx;
						}
						&-image {
							position: absolute;
							width: 44rpx;
							height: 10rpx;
							left: 10rpx;
							top: 48rpx;
							z-index: 100;
						}
					}
				}
				&-link {
					display: flex;
					align-items: flex-start;
					justify-content: flex-end;
					padding-top: 6rpx;
					&-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
					}
					&-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			&-context {
				display: flex;
				align-items: center;
				margin-top: 38rpx;

				&-box {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
				}
				&-item {
					position: relative;
					text-align: center;
					width: 72rpx;

					&-num {
						position: absolute;
						padding: 0 6rpx;
						left: 44rpx;
						height: 28rpx;
						background: #5359FF;
						font-size: 20rpx;
						font-weight: 500;
						color: #ffffff;
						line-height: 24rpx;
						text-align: center;
						border-radius: 14rpx;
						border: 2rpx solid #ffffff;
						min-width: 28rpx;
					}
					&-icon {
						margin-top: 16rpx;
						width: 48rpx;
						height: 48rpx;
					}
					&-name {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						margin-top: 12rpx;
					}
				}
			}
		}
		&__list {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 80rpx 24rpx 20rpx 24rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			flex-wrap: wrap;
			position: relative;
			&-title{
				position: absolute;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				top: 28rpx;
				left: 28rpx;
			}
			.list-item {
				width:25%;
				// height: 108rpx;
				padding: 0;
				background-color: #ffffff;
				margin: 0;
				&::after {
					border: none;
				}
				&:last-child {
					border-bottom: none;
				}
				.list-item-left {
					
					// image{
					// 	display: block;
					// }
					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
					.icon {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
		}
	}
}
</style>
